<!DOCTYPE html><html><head><title>19-第十九章-css3 transform变换及盒模型</title><meta charset='utf-8'><link href='https://dn-maxiang.qbox.me/res-min/themes/marxico.css' rel='stylesheet'><style>
.note-content  {font-family: 'Helvetica Neue', Arial, 'Hiragino Sans GB', STHeiti, 'Microsoft YaHei', 'WenQuanYi Micro Hei', SimSun, Song, sans-serif;}

</style></head><body><div id='preview-contents' class='note-content'>
                        
                    



<h1 id="19-第十九章-css3-transform变换及盒模型">19-第十九章-css3 transform变换及盒模型</h1>

<p></p>



<h2 id="一-变换">一、 变换</h2>

<blockquote>
  <p>transform:rotate() skew() scale()  translate()</p>
</blockquote>

<p><code>rotate(</code>angle<code>)</code>  定义 2D 旋转，在参数中规定角度。（单位deg）   </p>

<blockquote>
  <ul><li>正值   顺时针</li>
  <li>负值    逆时针 <br>
  scale(x,y)      定义 2D 缩放。【正数 | 小数 | 零 | 负数 】</li>
  <li>一个值的时候表示X,Y一样</li>
  </ul>
</blockquote>

<p><code>translate(</code>x,y<code>)</code>      定义 2D 位移。（length） 在X轴Y轴的移动      </p>

<blockquote>
  <ul><li>一个值默认为X轴</li>
  </ul>
</blockquote>

<p><code>skew(</code>x-angle,y-angle<code>)</code>定义沿着 X 和 Y 轴的 2D 倾斜转换。（单位deg）</p>

<blockquote>
  <ul><li>一个参数时：表示水平方向的倾斜角度    </li>
  <li><code>skewX(</code>angle<code>)</code>  定义沿着 X 轴的 2D 倾斜转换。  </li>
  <li><code>skewY(</code>angle<code>)</code>  定义沿着 Y 轴的 2D 倾斜转换。</li>
  </ul>
</blockquote>



<p><img longdesc="./1515421013536.png" alt="Alt text" title="" type="image/png" class="" src="">  <img longdesc="./1515421019748.png" alt="Alt text" title="" type="image/png" class="" src="">  <img longdesc="./1515421027405.png" alt="Alt text" title="" type="image/png" class="" src=""></p>

<hr>



<h2 id="二-transform-origin-变换基点中心点">二、 transform-origin 变换基点(中心点)</h2>

<p>Transform-origin 转换的基点（x y z）， 【默认50% 50%】，效果等同于center center</p>

<blockquote>
  <p>X :定义基点被置于 X 轴的何处。</p>
  
  <ul><li>值：    【left  center right 】  【length 】 【%】</li>
  </ul>
  
  <p>Y :定义基点被置于Y 轴的何处。</p>
  
  <ul><li>值：    【top center bottom】   【length】 【 %】</li>
  </ul>
  
  <p>Z :定义基点被置于Z轴的何处(3D环境才有)。</p>
  
  <ul><li>值：    【length】</li>
  </ul>
</blockquote>

<hr>



<h2 id="三-transform-注意事项">三、 transform 注意事项</h2>

<blockquote>
  <p>A ) transform:scale() translate()；与 transform:scale() translate(); 执行先后 <br>
  B) transform:scale() translate() 先scale后translate 受scale影响</p>
</blockquote>

<hr>



<h2 id="四-box-sizing-盒模型解析模式">四、 box-sizing 盒模型解析模式</h2>

<p>box-sizing :</p>

<p><code>content-box</code>   标准盒模型(和css2一样的计算) </p>

<blockquote>
  <p>宽度和高度之外绘制元素的内边距和边框  <br>
      width,height外绘制padding,border，盒子大小变大</p>
</blockquote>

<p><code>border-box</code>    怪异盒模型 </p>

<blockquote>
  <p>从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度 <br>
      width,height内绘制padding,border，盒子大小不变</p>
</blockquote>

<hr>



<h2 id="五-calc运算">五、 calc()运算</h2>

<p>1、calc()使用通用的数学运算规则，但是也提供更智能的功能：</p>

<blockquote>
  <ul><li>使用“<code>+</code>”、“<code>-</code>”、“<code>*</code>” 和 “<code>/</code>”四则运算；</li>
  <li>可以使用<code>percenter</code>、<code>px</code>、<code>em</code>、<code>rem</code>等单位；</li>
  <li>可以混合使用各种单位进行计算；</li>
  <li>表达式中有“<code>+</code>”和“<code>-</code>”时，其前后必须要有空格，如”widht: calc(12%+5em)”这种没有空格的写法是错误的；</li>
  </ul>
</blockquote>

<p>2、浏览器的兼容性</p>



<pre class="prettyprint with-line-number hljs-dark"><code class="hljs scss"><div class="hljs-line"><span class="hljs-comment line-number">1.</span> <span class="hljs-selector-class">.elem</span> {大家在实际使用时，同样需要添加浏览器的前缀
</div><div class="hljs-line"><span class="hljs-comment line-number">2.</span>    <span class="hljs-attribute">width</span>:-moz-calc(expression);
</div><div class="hljs-line"><span class="hljs-comment line-number">3.</span>    <span class="hljs-attribute">width</span>:-webkit-calc(expression);
</div><div class="hljs-line"><span class="hljs-comment line-number">4.</span>    <span class="hljs-attribute">width</span>:calc();
</div><div class="hljs-line"><span class="hljs-comment line-number">5.</span> }
</div></code></pre></div></body></html>